<template>
	<view class="category">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="queryNextPageDetails"
			@scroll="scroll">
			<view class="goods_small">
				<view v-for="item in dataList" :key="item.productId" class="item" @tap="() => toDetail(item)">
					<view class="img_outer">
						<image class="img" mode="aspectFill" :src="item.productSquareUrl" />
					</view>
					<view class="name">{{ item.productShortName }}</view>
					<view class="bottom">
						<view class="price-wrap">
							<text class="current_price">¥{{ item.currentPrice }}</text>
							<text class="origin_price">¥{{ item.originalPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="dataList.length === 0" class="shopping-cart-empty-component-container">
				<image mode="widthFix" class="icon_shopping_cart" src="../../static/img/apollo/search_empty.png" />
				<view class="empty-tips_0">没有找到要的内容</view>
			</view>
			<uni-load-more :clickLoadMore="queryNextPageDetails" style="font-size: 26rpx;" v-if="dataList.length !== 0"
				:status="hasMore"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import Big from 'big.js';
import { productModule } from '../../api/product.js';

export default {
	data() {
		return {
			ajaxLoading: false,
			moduleId: '',
			totalPage: 0, //总页数
			current: 1, //当前页码
			size: 21, //每一页的商品数量
			hasMore: 'more',
			dataList: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		}
	},
	onLoad(params) {
		this.moduleId = params.moduleId;
		this.getDataList();
	},
	onShareTimeline() {
		return {
			title: '希尔顿酒店',
			imageUrl: '', // 可自定义图片，若图片URL为空则默认取小程序Logo
		};
	},
	methods: {
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/goodsDetail/index?productId=' + item.productId,
			})
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		getDataList() {
			if (!this.moduleId) {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				return;
			}
			productModule({
				moduleId: this.moduleId,
				pageNo: this.current,
				pageSize: this.size,
			}).then((res) => {
				const {code, data, msg} = res
				if(code === 200) {
					this.totalPage = data.pages;
					this.hasMore = (this.current === data.pages) ? 'noMore' : 'more';
					this.current += 1;
					data.records.forEach((e) => {
						e.originalPrice = new Big(e.originalPrice).div(100);
						e.currentPrice = new Big(e.currentPrice).div(100);
					})
					this.dataList = this.dataList.concat(data.records);
				}
			})
		},
		queryNextPageDetails() {
			if(this.ajaxLoading){
				return false;
			}
			if (this.current > this.totalPage) {
				return;
			}
			this.ajaxLoading = true;
			productModule({
				moduleId: this.moduleId,
				pageNo: this.current,
				pageSize: this.size,
			}).then((res) => {
				const {code, data, msg} = res
				if(code === 200) {
					this.totalPage = data.pages;
					this.hasMore = (this.current === data.pages) ? 'noMore' : 'more';
					this.current += 1;
					data.records.forEach((e) => {
						e.originalPrice = new Big(e.originalPrice).div(100);
						e.currentPrice = new Big(e.currentPrice).div(100);
					})
					this.dataList = this.dataList.concat(data.records);
				}
				this.ajaxLoading = false;
			})
		},
		onShareAppMessage(res) {
			return {
				title: '希尔顿酒店',
				path: `pages/index/index`,
				success: res => {}
			}
		},
		onReachBottom: function() {
			this.queryNextPageDetails();
		},
	}
}
</script>

<style scoped>
.category {
	display: flex;
	overflow: hidden;
	height: 100vh;
	background-color: #f7f7f7;
}

.scroll-Y {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	padding: 20rpx;
}

.goods_small {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 10rpx;
}

.item {
	width: calc(50% - 15rpx);
	margin-bottom: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
}

.img_outer {
	width: 100%;
	height: 300rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}

.img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8rpx;
}

.name {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.price-wrap {
	display: flex;
	align-items: baseline;
}

.current_price {
	font-size: 32rpx;
	font-weight: bold;
	color: #f25500;
}

.origin_price {
	font-size: 24rpx;
	color: #999999;
	text-decoration: line-through;
	margin-left: 12rpx;
}

.empty-tips_0 {
	width: 100%;
	text-align: center;
	font-size: 30rpx;
	color: #666666;
	line-height: 43rpx;
	margin-top: 50rpx;
}

.shopping-cart-empty-component-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #fff;
	width: 100%;
	height: 560rpx;
}

.shopping-cart-empty-component-container .icon_shopping_cart {
	margin: 160rpx 0 0;
	width: 233rpx;
	height: 194rpx;
}
</style> 